<template>
  <div class="foot">
    <!--    底部菜单导航栏-->
    <mt-tabbar v-model="selected" @click.native="switchCompo" fixed>
      <mt-tab-item id="table">
        <img src="../assets/img/table.png" slot="icon">
        报表
      </mt-tab-item>
      <mt-tab-item id="charts">
        <img slot="icon" src="../assets/img/charts.png">
        图表
      </mt-tab-item>
      <mt-tab-item id="cad">
        <img slot="icon" src="../assets/img/cad.png">
        CAD
      </mt-tab-item>
      <mt-tab-item id="linkStatus">
        <img slot="icon" src="../assets/img/linkstatus.png">
        台站工况
      </mt-tab-item>
      <mt-tab-item id="papers">
        <img slot="icon" src="../assets/img/paper_icon.png">
        精选文章
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>

export default {
  name: "FooterBar",
  data() {
    return {
      selected: 'table',
    }
  },
  methods: {
    switchCompo: function () {
      this.$emit('navChange',this.selected);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/style/main";

.foot {
  display: flex;
  justify-content: space-between;
  height: $th;
  line-height: $th;
  font-size: $text-size-imp;
}
</style>